<template>
  <el-card class="user-info-card">
    <div class="card-header">
      <h2>用户信息</h2>
    </div>

    <div class="card-content">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="用户名">
          {{ userInfo.userName }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式">
          {{ userInfo.phoneNumber }}
        </el-descriptions-item>
        <el-descriptions-item label="年级">
          {{ userInfo.grade }}
        </el-descriptions-item>
        <el-descriptions-item label="专业">
          {{ userInfo.major }}
        </el-descriptions-item>
        <el-descriptions-item label="班级">
          {{ userInfo.userClass }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { UserControllerService, type UserVO } from "../../../../../../generated";
import { ElMessage } from "element-plus";

// 初始化用户信息
const userInfo = ref<UserVO>({});

const loadData = async () => {
  try {
    const res = await UserControllerService.getLoginUser();
    if (res.code === 0) {
      userInfo.value = res.data as UserVO;
    } else {
      ElMessage.error("加载数据时发生错误：" + res.message);
    }
  } catch (error) {
    ElMessage.error("加载数据时发生错误：" + (error as Error).message);
  }
};

onMounted(() => {
  loadData();
});
</script>

<style scoped>
.user-info-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
}

.card-header {
  flex: 0 0 20%;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.card-header h2 {
  font-weight: bold;
  margin: 0;
}

.card-content {
  flex: 0 0 70%;
  overflow-y: auto;
}
</style>
